<template>
	<view class="content_box">
		<u-navbar  title-size="36" :is-back="false" :border-bottom="false" back-icon-color="#000" title="广场"></u-navbar>
		<view class="flex align-center justify-between pr30 ww100 h160" style="position: fixed; background-color: #FFFFFF; z-index: 1000;">
			<view class="tab-list">
				<u-tabs :list="listTab" active-color="#020002" :bar-style="style" gutter="40" item-width="300" :is-scroll="false" :current="currentIndex" @change="change"></u-tabs>
			</view>

			<!-- 点击发布,需要去认证 -->
			<view class="" v-if="currentIndex == 1 || currentIndex == 2"><button type="default" class="cu-btn bgc-btn" @click="jump">发布</button></view>
		</view>

		<view class="mt100 ww100 mt160">
			<!-- 新榜 -->
			<home-list v-if="currentIndex == 0" @tabIndex="getUserXing" :xbList="xbList"></home-list>

			<scroll-view :style="{ height: windowHeight + 'px' }" :scroll-top="200" scroll-y="true" class="scroll-Y" @scrolltolower="onrendButtom" lower-threshold="200">
				<view>
					<!-- 最新 -->
					<home-notice v-if="currentIndex == 1" :newestListFrom="newestListFrom"></home-notice>

					<!-- 邀约 -->
					<home-invite v-if="currentIndex == 2" :getListFrom="getListFrom" @classInit="classInit" :kindList="kindList"></home-invite>

					<!-- 陪玩 -->
					<home-play v-if="currentIndex == 3" :listFrom="listFrom" @kindeId="ClickTab" :playList="playList"></home-play>
				</view>
			</scroll-view>
		</view>

		<u-popup v-model="showAuthentication" width="560" height="420" mode="center" border-radius="14">
			<view class="text-center pt30">
				<image src="../../static/img.jpg" class="w136 h136 r68" mode=""></image>

				<view class="bgc-pad">
					<i class="cuIcon-check mr7"></i>
					<text>未认证</text>
				</view>

				<view class="mt23 fs26 mb40"><text style="color: #666666;">真人通过认证后才能开通该功能</text></view>

				<button type="default" class="cu-btn go-to">去认证</button>
			</view>
		</u-popup>

		<!-- <u-tabbar active-color="#000000" inactive-color="#999999" icon-size="48" height="110" @change="changePages" v-model="current"
		 :list="list" :mid-button="true"></u-tabbar> -->
		 <u-tabbar active-color="#000000" inactive-color="#999999" icon-size="48" height="110" @change="changePages" v-model="current"
		  :list="list"></u-tabbar>
		<yy-tip :isCustom="false" />

		<!-- <yy-login v-if="vuex_login"></yy-login> -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
// import C:/Users/Administrator/Desktop/社交/pages/tab/components/home-list/home-list.vue
import homeList from './components/home-list/home-list.vue';
import homeNotice from './components/home-notice/home-notice.vue';
import homeInvite from './components/home-invite/home-invite.vue';
import homePlay from './components/home-play/home-play.vue';

export default {
	components: {
		homeList,
		homeNotice,
		homeInvite,
		homePlay
	},
	data() {
		return {
			style: {
				marginLeft: 15 + 'rpx',
				height: 8 + 'rpx',
				width: 8 + 'rpx',
				borderRadius: 4 + 'rpx',
				backgroundColor: '#000000'
			},
			list: [
				{
					iconPath: '../../static/tab/home.png',
					selectedIconPath: '../../static/tab/home-sele.png',
					text: '广场',
					customIcon: false,
					pagePath: '/pages/tab/index'
				},
				// {
				// 	iconPath: '../../static/tab/1v1.png',
				// 	selectedIconPath: '../../static/tab/1v1-sele.png',
				// 	text: '1v1',
				// 	customIcon: false,
				// 	pagePath: '/pages/tab/covey'
				// },
				// {
				// 	iconPath: '../../static/tab/good.png',
				// 	selectedIconPath: '../../static/tab/good.png',
				// 	text: '推荐',
				// 	midButton: true,
				// 	customIcon: false,
				// 	pagePath: '/pages/tab/recommend'
				// },
				{
					iconPath: '../../static/tab/tuij.png',
					selectedIconPath: '../../static/tab/tuij-sele.png',
					text: '推荐',
					customIcon: false,
					pagePath: '/pages/tab/recommend'
				},
				{
					iconPath: '../../static/tab/chat.png',
					selectedIconPath: '../../static/tab/chat-sele.png',
					text: '聊天',
					customIcon: false,
					pagePath: '/pages/tab/chat'
				},
				{
					iconPath: '../../static/tab/me.png',
					selectedIconPath: '../../static/tab/me-sele.png',
					text: '我的',
					isDot: false,
					customIcon: false,
					pagePath: '/pages/tab/me'
				}
			],
			current: 0,
			listFrom: [],
			playList: [],
			listTab: [
				{
					name: '星榜'
				},
				{
					name: '最新'
				},
				{
					name: '邀约'
				},
				{
					name: '陪玩'
				}
			],
			currentIndex: 1,
			xbList: [],
			currentSize: 1,
			limit: 10,
			newestListFrom: [],
			showAuthentication: false,
			getListFrom: [],
			kindClass: 1, // 邀约
			kindList: [],
			windowHeight: this.windowHeight - 100,
			unllList: ''
			// time: null,
			// timestamp: '2021-07-10 16:32:42'
		};
	},
	onShow() {
		this.getUserXing();
		this.getList();
		this.newestList(); // 最新 列表
		this.getListThme();
		this.getInviteList(); // 邀约
	},
	onLoad(e) {
		// var userInfo = uni.getStorageSync('userInfo');
		// if (userInfo) {
		// 	this.l.to('/pages/tab/index')
		// 	// uni.switchTab({
		// 	// 	url: '/pages/tab/index'
		// 	// });
		// }
	},
	watch: {
		kindClass(newValue, oldValue) {
			if (newValue) {
				this.kindList = [];
				this.currentSize = 1;
				this.getInviteList(); // 邀约
			}
		}
	},
	methods: {
		changePages(e) {
			console.log('e==>', e);
			// if (e == 0) {
			// 	this.l.to('/pages/tab/index');
			// } else if (e == 1) {
			// 	this.l.to('/pages/tab/covey');
			// } else if (e == 2) {
			// 	this.l.to('/pages/tab/recommend');
			// } else if (e == 3) {
			// 	this.l.to('/pages/tab/chat');
			// } else {
			// 	this.l.to('/pages/tab/me');
			// }
			
			if (e == 0) {
				this.l.to('/pages/tab/index');
			} else if (e == 1) {
				this.l.to('/pages/tab/recommend');
			} else if (e == 2) {
				this.l.to('/pages/tab/chat');
			} else if (e == 3) {
				this.l.to('/pages/tab/me');
			} 
		},

		change(index) {
			this.currentIndex = index;
			if (this.currentIndex == 1) {
				this.newestList();
			} else if (this.currentIndex == 2) {
				this.getInviteList();
			} else if (this.currentIndex == 3) {
				this.ClickTab();
			}
		},

		jump() {
			if (this.currentIndex == 1) {
				this.l.to('/pages/home/release');
			} else if (this.currentIndex == 2) {
				this.l.to('/pages/home/Issued');
			}
		},

		// kind == 1 魅力 新榜
		async getUserXing(kind = 1) {
			const res = await this.$u.get(`api/user/star/xb/${kind}`);
			this.xbList = res.data;
		},

		// 最新 列表
		async newestList() {
			const res = await this.$u.get(`api/user/dyn/newerDyn/${this.currentSize}/${this.limit}`);
			this.newestListFrom = [...this.newestListFrom, ...res.data];
			this.unllList = res.data.length;
		},

		// 陪玩组件列表
		async getList() {
			const res = await this.$u.get('api/user/play/kind');
			this.listFrom = res.data;
		},

		// 陪玩组件 请求数据
		async ClickTab(playKindId = this.listFrom[0].id) {
			const res = await this.$u.get(`api/user/play/listPlay/${playKindId}`);
			this.playList = res.data;
		},

		async getListThme() {
			const res = await this.$u.get('api/user/theme/list');
			this.getListFrom = res.data;
		},

		async getInviteList() {
			const res = await this.$u.get(`api/user/square/invite/list/${this.currentSize}/${this.limit}/${this.kindClass}`);
			this.kindList = [...this.kindList, ...res.data];
			this.unllList = res.data.length;
		},

		classInit(index) {
			this.kindClass = index;
		},

		// 触底了
		onrendButtom() {
			if (this.currentIndex == 1) {
				if (this.unllList == 0) return this.l.msgg('没有更多了!');
				this.currentSize++;
				this.newestList();
			}

			if (this.currentIndex == 2) {
				if (this.unllList == 0) return this.l.msgg('没有更多了!');
				this.currentSize++;
				this.getInviteList();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.content_box {
	// padding-left: 32rpx;
	// margin-top: -5rpx;

	.tab-list {
		background-color: #ffffff !important;

		/deep/.u-scroll-view {
			width: 400rpx !important;
		}

		/deep/.u-tabs {
			background-color: #ffffff !important;
			z-index: 9999;
		}
	}

	.bgc-btn {
		color: #ffffff;
		font-size: 24rpx;
		padding: 13rpx 38rpx;
		background-color: #020002 !important;
	}

	.bgc-pad {
		width: 130rpx;
		height: 40rpx;
		color: #666666;
		font-size: 22rpx;
		line-height: 40rpx;
		margin: 14rpx auto;
		border-radius: 20rpx;
		background-color: #f5f5f5;
	}

	.go-to {
		font-size: 30rpx;
		padding: 21rpx 53rpx;
		border-radius: 12rpx;
		color: #ffffff;
		background-color: #000000;
	}
}
</style>
